<template>
    <section class="upload-file-box">
        <div class="file-content" v-if="showUpload">
            <form :id="upload_form" class="upload-file" method="post" enctype="multipart/form-data">
                <span data-v-0f24ec74="" type="button"   class="el-button el-button--primary el-button--medium upload-btn" data-v-9ec30bec="">
                        <i class="el-icon-upload" style="padding-right:6px"></i>附件上传
                    <input :id="excelUpload" type="file" name="uploadFile" :disabled="disabled" @change="excelBatchFun(this)" 
                    accept="multipart/form-data" ref="updateBatchFile"/>
                </span>
            </form>
            <span class="tips">{{ tips }}</span>
        </div>
    </section>
</template>
<script>
import previewFile from '@/components/preview';
import { deleteAtthById } from "@/service/core/dictionary";
import baseURL from '@/utils/baseURL'
import $ from 'jquery'
export default {
    name: "uploadFile", // 单文件上传组件
    components: { previewFile },
    props: {
        flag: { // 附件标识   用于区别反显时  两个上传组件绑定到一个工单id的情况。
            type: String,
            default: ""
        },
        showUpload: { // 是否显示上传按钮
            type: Boolean,
            default: true
        },
        showList: { // 用于是否显示列表信息
            type: Boolean,
            default: true
        },
        showView: { // 是否允许预览文件
            type: Boolean,
            default: true
        },
        busiId: { // 业务id 附件关联时用
            type: String,
            default: ""
        },
        filelist: { // 附件列表
            type: Array,
            default() {
                return [];
            }
        },
        fileMax: { // 附件最大上传数量
            type: Number,
            default: 0
        },
        removeable: { // 已上传的附件是否可删除
            type: Boolean,
            default: true
        },
        download: { // 是否可下载
            type: Boolean,
            default: false
        },
        tips: { // 按钮右侧的提示文字
            type: String,
            default: ''
        },
        allowed: { // 允许上传的文件的后缀名  不传则不限制
            type: Array,
            default() {
                return []
            }
        },
        disabled: { // 是否禁用
            type: Boolean,
            default: false
        },
        ascrType: { // 归属类型
            type: String,
            default: ''
        },
        ascrId: { // 归属ID
            type: String,
            default: ''
        },
    },
    data() {
        return {
            token: this.$store.state.token.token,
            shopId: this.$store.state.token.sceneId,
            upload_form: "upload_form" + new Date().getTime(),
            excelUpload: "excelUpload" + new Date().getTime(),
            percentage: 0, // 上传进度
        };
    },
    methods: {
        excelBatchFun() { // 表单提交
            if (this.fileMax > 0 && this.filelist.length >= this.fileMax) {
                this.$notify({
                    title: "提示",
                    type: "error",
                    message: `最多支持上传${this.fileMax}个附件！`
                });
                return;
            }
            let val = $("#" + this.excelUpload).val();
            let _this = this;
            var options = {
                target: "", //更换内容
                url: baseURL.url + "/api-sys/doc/dMyDoc/upload",
                resetForm: true,
                data: {
                    token: this.token,
                    busiId: `${this.busiId}`,
                    busiType: "attachment" + this.flag,
                    isConvert: true,
                    chnlCode: 'PC',
                    ascrType: _this.ascrType,
                    ascrId: _this.ascrId,
                },
                beforeSubmit: function(fileList, obj, config) { // 上传前 附件大小验证。
                    let size = fileList[0].value.size;
                    let name = fileList[0].value.name;
                    if(_this.allowed && _this.allowed.length) {
                        let type = name.split('.').pop();
                        if(_this.allowed.indexOf(type) == -1) {
                            _this.$notify({
                                title: '提示',
                                type: 'warning',
                                message: '不支持的文件类型！'
                            })
                            return false
                        }
                    }
                    if (size > 1024 * 1024 * 50) {
                        _this.$notify({
                            title: "提示",
                            type: "error",
                            message: "上传附件大小不能超过50M！"
                        });
                        return false;
                    }

                },
                success: function(response) {
                    console.log(response);
                    
                    let res = JSON.parse(response)
                    if(res.code == 1000) {
                        _this.$notify.info({
                            title: "提示",
                            message: "附件上传成功！"
                        });
                        _this.filelist.push(res.data);
                        _this.percentage = 0;
                        // _this.$emit('fileList', _this.filelist)
                        _this.$emit('refresh')
                    }else {
                        _this.$notify.error({
                            title: "提示",
                            message: "附件上传失败！"
                        });
                        _this.percentage = 0;
                    }
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    _this.percentage = percentComplete - 1;
                },
                error: function() {
                    _this.$notify.error({
                        title: "提示",
                        message: "附件上传失败！"
                    });
                    _this.percentage = 0;
                }
            };
            $("#" + this.upload_form).ajaxSubmit(options);
        },
        bigFile(item) { // 文件预览
            if(this.showView) {
                this.$refs.view.showPreview(item.id);
            }
        },
        downloadFile(item) { // 下载文件
            if(item.id) {
                window.location.href = `/api/api-sys/sys/atth/download?id=${item.id}`
            }
        },
    }
};
</script>
<style lang="scss">
.upload-file-box {
    display: inline-block;
    float: left;
    .file-content {

        .upload-file {
            position: relative;
            display: inline-block;
            vertical-align: top;
            height: 35px;

            .upload-btn {
                position: relative;
                overflow: hidden;
                input[name="uploadFile"] {
                    position: absolute;
                    width: 110px;
                    height: 35px;
                    top: 0;
                    left: -10px;
                    bottom: 0;
                    right: 0;
                    opacity: 0;
                    z-index: 10;
                }
            }
        }

        .tips {
            font-size: 12px;
            color: #999;
            margin-left: 10px;
        }
     
    }

    .file-wrap {

        .filelist {
            width: 100%;
            .el-upload-list__item{
                height: 35px;
                line-height: 35px;
                display: flex;
                align-items: center;

                .el-upload-list__item-name {
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                > i {
                    position: static;
                    margin-right: 10px;
                    cursor: pointer;
                }

            }
        }
    }
    
}

</style>

